Ext.require('Ext.chart.*');
Ext.require('Ext.layout.container.Fit');

Ext.require(['Ext.data.*']);
    //create the store with data 
	//classname,count
	//
	
	
	var store = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data1'],
    data: [
        {'name':'metric one', 'data1':10},
        {'name':'metric two', 'data1':7},
        {'name':'metric three', 'data1':5},
        {'name':'metric four', 'data1':2},
        {'name':'metric five', 'data1':27}                                                
    ]
});
//	store = app.getController().classPieStore;
    var donut = false;

        Ext.define('EUF.view.piechart', {
		extend:'Ext.panel.Panel',
        width: 900,
        height: 550,
        title: 'Semester Trends',
		alias :'widget.piechartreport',
		// renderTo: 'document.body',
        
     //   renderTo: Ext.getBody(),
        layout: 'fit',
        tbar: [{
            text: 'Reload Data',
			id:'reloadPIE',
            handler: function() {
   
		}
        }, {
            enableToggle: true,
            pressed: false,
            text: 'Donut',
           toggleHandler: function(btn, pressed) {
                var chart = Ext.getCmp('chartCmp');
                chart.series.first().donut = pressed ? 35 : false;
                chart.refresh();
            }
        }],
/*		items: {
		 xtype: 'button',
          text: 'yes',
           
         },*/
		   initComponent: function() {
	//	   alert('dd');
			var me = this;
			
		        me.callParent(arguments);

 },
        items: {
            xtype: 'chart',
			       width: 900,
        height: 500,
             id: 'chartCmp',
            animate: true,
            store: 'PieClassStore', 
            shadow: true,
            legend: {
                position: 'right'
            },
            insetPadding: 60,
            theme: 'Base:gradients',
            series: [{
                type: 'pie',
                field: 'data1',
                showInLegend: true,
                donut: donut,
                tips: {
                  trackMouse: true,
                  width: 140,
                  height: 28,
                  renderer: function(storeItem, item) {
                    //calculate percentage.
                    var total = 0;
					     var st = Ext.getCmp('chartCmp').store;
           
                    st.each(function(rec) {
                        total += rec.get('data1');
                    });
                    this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
                  }
                },
                highlight: {
                  segment: {
                    margin: 20
                  }
                },
                label: {
                    field: 'name',
                    display: 'rotate',
                    contrast: true,
                    font: '18px Arial'
                }
            }]
        }
    });
